<template>
  <div id="bar">
    <router-link class="bar_a" to="/homepage">
      <p class="p1"><span class="iconfont icon-shouye"></span></p>
      <p class="p2">首页</p>
    </router-link>
    <router-link class="bar_a" to="/forumview">
      <p class="p1"><span class="iconfont icon-luntan"></span></p>
      <p class="p2">论坛</p>
    </router-link>
    <router-link class="bar_a" to="/selectcar">
      <p class="p1"><span class="iconfont icon-jiaoche"></span></p>
      <p class="p2">选车</p>
    </router-link>
    <router-link class="bar_a" to="/usedcar">
      <p class="p1"><span class="iconfont icon-caozuo-xunhuan"></span></p>
      <p class="p2">二手车</p>
    </router-link>
    <router-link class="bar_a" to="/myview">
      <p class="p1"><span class="iconfont icon-wode"></span></p>
      <p class="p2">我的</p>
    </router-link>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#bar {
  width: 100%;
  height: 0.5rem;
  /* background-color: yellow; */
  position: fixed;
  bottom: 0;
  display: flex;
  text-align: center;
  line-height: 0.5rem;
  font-weight: 700;
}

.bar_a {
  flex: 1;
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #828ca0;
}

p {
  width: 100%;
  height: 0.25rem;
  text-align: center;
  line-height: 0.125rem;
}

.p1 {
  padding: 0.07rem 0 0 0;
  font-size: 0.18rem;
}

.p1 span {
  font-size: 0.22rem;
}

.p2 {
  padding: 0.03rem 0 0 0;
}

.router-link-active {
  color: #0055ff;
}
</style>